<template>
  <v-base :base-title="'自定义滚动条-translate'">
    <template slot="baseinfo">
      内容超出时，显示自定义滚动条, 不产生默认的滚动条
    </template>
    <template slot="baseform">
      <v-scrollerPosition :scrollConHeight="scrollConHeight">
        <div ref="testdiv">dtaset
          <p>dfasdfa</p>
        </div>
      </v-scrollerPosition>
    </template>
  </v-base>
</template>
<script>
  import base from './base.vue';
  import scrollerPosition from '../../components/scroller/scrollerPosition.vue';
  export default{
    data () {
      return {
        demo_normal: '<v-uploadfile></v-uploadfile>',
        barHeight: 0,
        isCanMove: false,
        scrollConHeight: 80,
        current: null
      };
    },
    computed: {
    },
    methods: {
    },
    components: {
      'v-base': base,
      'v-scrollerPosition': scrollerPosition
    },
    mounted: function () {
      console.log(this.$refs.testdiv.offsetHeight);
    }
  };
</script>
<style scoped>
  .scroll-content{
    position: relative;
    height: 400px;
    overflow: hidden;
    background-color: lightgray;
  }
  .scroll-content>
  .scroll-bar{
    position: absolute;
    height: 50px;
    width: 5px;
    right: 0;
    top: 0;
    border-radius: 10px;
    background-color: blue;
    z-index: 10;
  }
  .scroll-content>
  .scroll-bar:active{
    background-color: red;
    cursor: pointer;
  }
  .scroll-content>
  .act-content{
    position: relative;
    box-sizing: border-box;
    height: 400px;
    overflow: hidden;
  }
  .scroll-content>
  .act-content>
  .test-content{
    position: relative;
    height: 800px;
    background-color: lightblue;
  }
</style>
